<template>
    <view class="choose-appeal">
        <view class="choose-appeal-box">
            <view class="choose-appeal-title">
                请选择诉求类型
            </view>
            <view class="choose-appeal-btn-item">
                <view class="choose-appeal-btn" @click="navigateTo('/applySubPackage/apply?type=0')">
                    <view class="btn-img">
                        <u-image src="../static/images/icon_legal.png" mode="widthFix" width="40rpx" color="#fff"></u-image>
                    </view>
                    法务咨询类
                </view>
                <view class="tip">
                    <view>包括但不限于</view>
                    <view>合规建设指导、合同纠纷、</view>
                    <view>劳动争议等法律咨询服务</view>
                    
                </view>
            </view>
            <view class="choose-appeal-btn-item">
                <view class="choose-appeal-btn" @click="navigateTo('/applySubPackage/apply?type=1')">
                    <view class="btn-img">
                        <u-image src="../static/images/icon_shixiang.png" mode="widthFix" width="40rpx" color="#fff"></u-image>
                    </view>
                    事项办理类
                </view>
                <view class="tip">
                    <view>提供政法系统领导面对面、</view>
                    <view>执法监督、法治体检、法律援助</view>
                    <view>公证服务、检察听证、</view>
                    <view>等法律事项的预约与办理</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>

const navigateTo = (url: string) => {
    uni.navigateTo({
        url: url
    })
}
</script>

<style lang="scss" scoped>
.choose-appeal{
    height: 100vh;
    width: 100vw;
    background: url('https://7072-prod-3gyndjxs02add8b0-1379203838.tcb.qcloud.la/static/img3.png') no-repeat left top;
    background-size: 100% 100%;
    position: relative;
    .choose-appeal-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .choose-appeal-title{
            font-size: 40rpx;
            font-weight: bold;
            margin-bottom: 40rpx;
        }
        .choose-appeal-btn-item{
            .choose-appeal-btn{
                display: flex;
                align-items: center;
                padding: 12rpx;
                border-radius: 8rpx;
                background: #19428A;
                color: #fff;
                margin: 48rpx;
                .btn-img{
                    background: #fff;
                    width: 48rpx;
                    height: 48rpx;
                    padding: 4rpx;
                    margin-right: 24rpx;
                }
            }
            .tip{
                text-align: center;
                color: #666;
                letter-spacing:-1px
            }
        }
    }
}
</style>